<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        text-align: center;
        font-size: 30px;
        color: red;
    }
</style>

<body>
    <div class="box"></div>
</body>
<script>
    window.onload = function () {
        // //获取当前时间   格林 1970 1月1日  0：0：0
        // var date = new Date();
        // console.log(date);
        // //给定日期
        // var date1 = new Date('2021/12/12 23:59:59')
        // console.log(date1);


        var endtime = new Date('2020/11/11 23:59:59');
        function fn() {
            //当前时间
            var currenttime = new Date();
            //截止时间到当前时间所有的秒数 1000ms=1s
            var alls = (endtime.getTime() - currenttime.getTime()) / 1000
            //获取天数
            var days = parseInt(alls / 60 / 60 / 24).toString().padStart(2,'0');
            //获取小时数
            var hours = parseInt(alls / 60 / 60 % 24).toString().padStart(2,'0');
            //获取分钟
            var minutes = 0;
            var temp = alls - days * 24 * 60 * 60 - hours * 60 * 60
            if (temp > 0) {
                minutes = parseInt(temp / 60).toString().padStart(2,'0');
            }
            //获得秒
            var seconds = 0;
            var temps = alls - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60
            if (temps > 0) {
                seconds = parseInt(temps.toString().padStart(2,'0')) ;
            }
            //es6 字符串模板  
            var str = `<h1>截止时间：2020-11-11 23：59：59</h1>
                <h1>还剩：${days}天${hours}时${minutes}分${seconds}秒</h1>
         `
            document.querySelector('.box').innerHTML = str

        }
        //开启一个定时器  setTimeout  只执行一次
        //一直执行
        setInterval(fn, 1000)

    }
</script>

</html>